const recordMap = new WeakMap();
const intersectionOb = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const animation = recordMap.get(entry.target);
            if (animation) {
                animation.play();
                intersectionOb.unobserve(entry.target); // 解除观察，节省资源
            }
        }
    });
}, {
    rootMargin: '0px', // 根据需要调整
    threshold: 0, // 当元素开始进入视口时触发
});

const elementsConfig = [
    {selector: ".banner-content-title", duration: 1000},
    {selector: ".banner-content-subtitle", duration: 1000},
    {selector: ".banner-content-cn-subtitle", duration: 1000},
    {selector: ".banner-content-slogan", duration: 1000},
    {selector: ".about-wrapper", duration: 1000},
    {selector: ".product-left", duration: 1000},
    {selector: ".product-right", duration: 1000},
    {selector: ".news-container", duration: 1000},
    {selector: ".promotion-box", duration: 1000},
    {selector: ".quality-box", duration: 1000},
    {selector: ".partners", duration: 1000},
    {selector: ".device-header", duration: 1000},
    {selector: ".device-nav-container", duration: 1000},
    {selector: ".products-container", duration: 1000}
];

function handleAnimation(el, duration) {
    const animation = el.animate([
        {transform: `translateY(50px)`, opacity: 0.1},
        {transform: `translateY(0)`, opacity: 1}
    ], {
        duration: duration,
        easing: "ease-in-out",
        fill: "forwards"
    });

    animation.pause();
    recordMap.set(el, animation);
    intersectionOb.observe(el);
}

// 初始化动画
elementsConfig.forEach(({selector, duration}) => {
    const el = document.querySelector(selector);
    if (el) handleAnimation(el, duration);
});

// 如果有动态加载的内容，可以在内容加载完成后再次调用上面的初始化逻辑
// 比如在AJAX请求成功后或者新的DOM元素被添加之后